<template>
    <div>
        <!-- 头部 -->
        <div class="header">
            <router-link to="/home">
                <!-- 折叠窗 -->
                <div class="zheDie">
                    <van-icon name="arrow-down" />
                </div>
            </router-link>

            <!-- 歌曲信息 -->
            <div class="songMsg">
                <div class="songName">{{ songName }}</div>
                <div class="author">{{ author }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'MusicHeader',
    props: ['songName', 'author']
}
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    padding: 10px;

    .zheDie {
        margin-top: 10px;
        margin-left: 10px;
        font-size: 15px;
        color: #999;
    }

    .songMsg {
        margin-right: 30px;
        width: 100%;
        text-align: center;
    }
}
</style>